<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{main.title}"></title>
    <style>
        .main-nav-tool{
            flex-basis: 100px;
            margin-top: 28px;
        }
        .main-system-menu{
            flex-basis: 42px;
        }
        .main-body{
            flex-grow: 1;
            display: flex;
            flex-direction: row;
        }
        .service-menu{
            flex-basis: 135px;
        }
        .service-contents{
            flex-grow: 1;
        }
        .man-user-item{
            display: none !important;
        }

        /*.nav-tabs {*/
        /*    border-bottom: 1px solid #ddd;*/
        /*}*/
        /*.nav-tabs > li > .active,*/
        /*.nav-tabs > li > a:FOCUS {*/
        /*    border-color: #ddd #ddd #fff;*/
        /*}*/
        /*.service-tab{*/
        /*    padding-left: 20px;*/
        /*}*/

    </style>
    <script th:inline="javascript" >
        function toChange(){
            window.location.href = /*[[@{toChange}]]*/'';
        }
        $(function () {
            $("body").css("height",$(document).height() + "px")
            $("#user-info-nav-tool-id").click(function (event) {
                event.stopPropagation();
                $(".gd-user-info > li > a.btn-toolbar").removeClass("man-user-item")
            });
            $("body").click(function (event) {
                $(".gd-user-info > li > a.btn-toolbar").addClass("man-user-item")
            })
            $("#modify-user-info-id").click(function (evnet) {
                evnet.stopPropagation()
                $("#modify-user-info-dialog-id").dialog('open');
            })
            $("#modify-user-info-dialog-id").dialog({
                autoOpen: false,
                width: 400,
                modal: true,
                resizable: false,
                title: /*[[#{user.modify.person.info}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function () {
                            $("#modify-user-info-form-id").submit();
                        }

                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function () {
                            $(this).dialog("close");
                        }

                    }
                ]
            });

            $(".main-system-menu > ul > li > a").click(function (event) {
                $(".main-system-menu > ul > li > a").removeClass("active")
                $(this).addClass("active")

                var menuId =  $(this).attr("menuId");
                loadServiceMenu(menuId);

            })

            $("#modify-user-info-form-id").ajaxForm({
                dataType: "json",
                success : function(data) {
                    message(data.msg);
                    $("#modify-user-info-dialog-id").dialog('close');
                },
                error : function() {
                    message(/*[[#{common.error}]]*/'');
                }
            });
            $(".main-system-menu > ul > li > a:first").click();
        });//ready
        function loadServiceMenu(menuId) {
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/loadServiceMenu}]]*/'',
                data: [{name:"menuId",value:menuId}],
                success: function (data) {
                    // console.info(data)
                    var htmlContents = "";
                    $(data).each(function (index,item) {
                        console.info(item)
                        htmlContents+= '<li><a href="#"><i class="' + item.menuIcon + '"></i><span>' + item.menuName +'</span></a>' ;
                        htmlContents+= '<ul class="nav nav-tabs service-tab">';
                        $(item.children).each(function (index1,item1) {
                            htmlContents+= '<li>' +
                                '<a target="main-contents-iframe" href="' + item1.menuUrl+'">' +
                                '<i class="' + item1.menuIcon + '"></i>' +
                                '<span>' + item1.menuName +'</span></a>' ;
                        });
                        htmlContents+= '</ul>';
                        htmlContents+= '</li>';
                    });
                    $("#service-menu-ul-id").html(htmlContents);
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }

            });
        }

    </script>

</head>
<body style="display: flex;flex-direction: column;width: 100%;height: 100%">
<div style="flex-basis: 78px;display: flex;flex-direction: row;">
    <div style="flex-grow: 1;">
        <img th:if="${session.siteLanguage} eq 'en'" th:src="@{/assets/images/logo_en.png}">
        <img th:if="${session.siteLanguage} ne 'en'" th:src="@{/assets/images/logo_zh.png}">
    </div>
    <div class="main-nav-tool">
        <a id="user-info-nav-tool-id" href="#" class="navbar-btn">
            <i class="glyphicon glyphicon-user"></i>
            <span sec:authentication="principal.username"></span>
        </a>
        <ul class="gd-user-info nav navbar-btn">
            <li>
                <a id="modify-user-info-id" href="#" class="btn-toolbar man-user-item">
                    <i class="glyphicon glyphicon-list-alt"> </i>
                    <span th:text="#{main.user.info}"></span>
                </a>
            </li>
            <li>
                <a href="#" class="btn-toolbar man-user-item" onclick="toChange()">
                    <i class="glyphicon glyphicon-lock"> </i>
                    <span th:text="#{main.modify.passord}"></span>
                </a>
            </li>
            <li>
                <a th:href="@{/logout}" class="btn-toolbar man-user-item">
                    <i class="glyphicon glyphicon-ban-circle"> </i>
                    <span th:text="#{main.logout}"></span>
                </a>
            </li>
        </ul>
    </div>
</div>
<div class="main-system-menu ">
    <ul class="nav nav-tabs">
        <li th:each="item:${session.menu}">
            <a href="#" th:menuId="${item.menuId}">
                <i th:class="${item.menuIcon}"></i>
                <span th:text="${item.menuName}"></span>
            </a>
        </li>
    </ul>
</div>
<div class="main-body">
    <div class="service-menu">
        <ul id="service-menu-ul-id" class="nav navbar-btns">

        </ul>
    </div>
    <div class="service-contents">
        <iframe  style="border: 0px solid transparent;" name="main-contents-iframe" width="100%" height="100%" th:src="@{/index}"></iframe>
    </div>

</div>
<div id="modify-user-info-dialog-id" style="display: none">
    <form id="modify-user-info-form-id" method="post" th:action="@{/user/modifyUserInfoById}">
        <div class="form-group">
            <span th:text="#{user.uuid}"></span>
            <span class="form-control" sec:authentication="principal.userUuid"></span>
            <input type="hidden" name="userUuid" th:value="${session.SPRING_SECURITY_CONTEXT.authentication.principal.userUuid}">
        </div>
        <div class="form-group">
            <span th:text="#{user.name}"></span>
            <input class="form-control" type="text" name="userName" th:value="${session.SPRING_SECURITY_CONTEXT.authentication.principal.username}"/>
        </div>
        <div class="form-group">
            <span th:text="#{user.nick}"></span>
            <input class="form-control" type="text" name="niceName" th:value="${session.SPRING_SECURITY_CONTEXT.authentication.principal.niceName}"/>
        </div>
        <div class="form-group">
            <span th:text="#{user.mobile}"></span>
            <input class="form-control" type="text" name="mobile" th:value="${session.SPRING_SECURITY_CONTEXT.authentication.principal.mobile}"/>
        </div>
        <div class="form-group">
            <span th:text="#{user.email}"></span>
            <input class="form-control" type="text" name="email" th:value="${session.SPRING_SECURITY_CONTEXT.authentication.principal.email}"/>
        </div>
    </form>

</div>

<!--<a th:href="@{/logout}" th:text="#{main.logout}" ></a>-->
</body>
</html>